<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <el-form
        :inline="true"
        @keyup.enter.native="searchQuery"
        style="margin: 20px"
      >
        <el-form-item label="名称">
          <el-input
            placeholder="请输入名称查询"
            v-model="queryParam.supplier"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            placeholder="请输入手机号码查询"
            v-model="queryParam.telephone"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            placeholder="请输入联系电话查询"
            v-model="queryParam.phonenum"
          ></el-input>
        </el-form-item>
        <el-form-item
          style="margin-left: 30px; overflow: hidden"
          class="table-page-search-submitButtons"
        >
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button style="margin-left: 8px" @click="searchReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="margin-top: -15px; margin-left: 20px">
      <el-button @click="handleAdd" type="primary" icon="el-icon-plus">新增</el-button>
      <el-button
        @click="handleImportXls()"
        type="primary"
        icon="el-icon-upload2"
        style="margin-left: 10px"
        >导入</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-download"
        @click="handleExportXls"
        style="margin-left: 10px"
        >导出</el-button
      >
      <el-dropdown>
        <el-button style="margin-left:10px;">
          批量操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-delete" @click.native="batchDel">删除</el-dropdown-item>
          <el-dropdown-item icon="el-icon-success" @click.native="batchSetStatus('true')">启用</el-dropdown-item>
          <el-dropdown-item icon="el-icon-error" @click.native="batchSetStatus('false')">禁用</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- table区域-begin -->
    <el-table
      :data="supplierList"
      style="width: 97%;margin:20px;"
      border="1"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="80" label="#"></el-table-column>
      <el-table-column label="名称" width="85" prop="supplier">
      </el-table-column>
      <el-table-column prop="contacts" label="联系人" width="85">
      </el-table-column>
      <el-table-column prop="telephone" label="手机号码" width="120"> </el-table-column>
      <el-table-column prop="phoneNum" label="联系电话" width="120"> </el-table-column>
      <el-table-column prop="email" label="电子邮箱" width="145"> </el-table-column>
      <el-table-column prop="beginNeedPay" label="期初应付" width="85"> </el-table-column>
      <el-table-column prop="allNeedPay" label="期末应付" width="85"> </el-table-column>
      <el-table-column prop="taxRate" label="税率(%)" width="80"> </el-table-column>
      <el-table-column prop="sort" label="排序" width="55"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.enabled" type="success">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170px">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button type="text" @click="removeById(scope.row)" icon="el-icon-delete" style="color: red;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="客户导入"
      :visible.sync="dialogVisible"
      width="30%"
      >
        <div>
          <p style="margin-left: 20px">第一步：<el-button @click="exprotExcel" type="text">客户Excel模板[下载]</el-button></p>
          <p style="margin-left: 76px;">提示：模板中的第一行请勿删除</p>
        </div>
        <div style="line-height: 20px;">
          <div style="margin-left: 20px;">
            第二步：
            <div style="margin-left: 60px;margin-top: -25px">
               <el-upload
                  :multiple="false"
                  :on-success="onUploadSuccess"
                  :action="'https://localhost:8080/supplier/importExcel'"
                  class="upload-demo"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload">导入</el-button>
                </el-upload>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="操作" :before-close="handleClose" :visible.sync="dialogFormVisible" width="920px">
      <el-form size="mini" ref="form" :model="form" :inline="true" :rules="rules" label-position="right" label-width="110px">
        <el-form-item label="名称:" prop="supplier">
          <el-input v-model="form.supplier" style="width:290px" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人:">
          <el-input v-model="form.contacts" placeholder="请输入联系人" style="width:290px"></el-input>
        </el-form-item>
        <el-form-item label="手机号码:">
          <el-input v-model="form.telephone" style="width:290px" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:">
          <el-input v-model="form.phonenum" placeholder="请输入联系电话" style="width:290px"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱:">
          <el-input v-model="form.email" style="width:290px" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>
        <el-form-item label="传真:">
          <el-input v-model="form.fax" placeholder="请输入传真" style="width:290px"></el-input>
        </el-form-item>
        <el-form-item label="期初应付:">
          <el-input v-model="form.beginNeedPay" style="width:290px" placeholder="请输入期初应付"></el-input>
        </el-form-item>
        <el-form-item label="期末应付:">
          <el-input v-model="form.allNeedPay" readonly style="width:290px"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号:">
          <el-input v-model="form.taxNum" style="width:290px" placeholder="请输入纳税人识别号"></el-input>
        </el-form-item>
        <el-form-item label="税率(%):">
          <el-input v-model="form.taxRate" placeholder="请输入税率" style="width:290px"></el-input>
        </el-form-item>
        <el-form-item label="开户行:">
          <el-input v-model="form.bankName" style="width:290px" placeholder="请输入开户行"></el-input>
        </el-form-item>
        <el-form-item label="账号:">
          <el-input v-model="form.accountNumber" placeholder="请输入账号" style="width:290px"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="form.address" style="width:290px" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="排序:">
          <el-input v-model="form.sort" placeholder="请输入排序" style="width:290px"></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            style="width: 290px"
            type="textarea"
            placeholder="请输入内容"
            v-model="form.description">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleSupplier('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import customerApi from "@/api/customer";

export default {
  data() {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      form: {
        id: undefined,
        type: '客户',
        supplier: ''
      },
      // 查询条件
      queryParam: {
        supplier: '',
        type: "客户",
        telephone: '',
        phonenum: '',
      },
      checkParam: {
        name: undefined,
        type: '客户',
        id: undefined
      },
      supplierList: [],
      tableData: [],
      multipleSelection: [],
      current: 1,
      pageSize: 5,
      item: {},
      total: 0,
      rules: {
        supplier: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { validator: this.checkIsNameAndTypeExist, trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.list();
  },
  methods: {
    handleClose(){
      this.$refs['form'].resetFields()
      this.form = {}
      this.dialogFormVisible = false
    },
    //上传成功调用的
    onUploadSuccess(){
      //关闭弹框
      this.dialogVisible = false;
      //刷新页面
      this.list();
    },
    exprotExcel(){
      window.open('/doc/customer_template.xls')
    },
    checkIsNameAndTypeExist(rule, value, callback){
      this.checkParam.id = this.form.id
      this.checkParam.name = this.form.supplier
      customerApi.checkIsNameAndTypeExist(this.checkParam)
        .then(res => {
          if (res.status){
            callback(new Error('客户已存在'))
          } else {
            callback()
          }
        })
    },
    list() {
      customerApi
        .supplierList(this.current, this.pageSize, this.queryParam)
        .then((res) => {
          this.supplierList = res.data.records;
          this.pageSize = res.data.size;
          this.current = res.data.current;
          this.total = res.data.total;
        });
    },
    handleImportXls() {
      this.dialogVisible = true
    },
    batchSetStatus(status) {
      if(this.multipleSelection==""){
        this.$message.warning('请至少选择一条数据进行修改！')
      }else{
       this.$confirm('是否修改客户状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let arrray=[]
          //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
          for(let i=0;i<this.multipleSelection.length;i++){
            arrray.push(this.multipleSelection[i].id)//把取出的对象push到数组里
          }
          customerApi.batchUpdate(status,arrray)
            .then(res => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.list()
            })
        })
      }
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form.id = undefined
      this.form.type = '客户'
    },
    batchDel() {
      if(this.multipleSelection==""){
        this.$message.warning('请至少选择一条数据进行删除！')
      }else{
        this.$confirm('此操作将永久删除该权限，是否继续？','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning',
          center: true
        }).then(()=>{
          // 声明空数组,这里的数组是后端需要的数据
          let arrray=[]
          //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
          for(let i=0;i<this.multipleSelection.length;i++){
            arrray.push(this.multipleSelection[i].id)//把取出的对象push到数组里
          }
          customerApi.deleteBatch(arrray).then(res=>{ //接口
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.list()//删完成功后初始化查询列表
          })
        })
      }
    },
    searchQuery() {
      this.list();
    },
    searchReset() {
      this.queryParam = {
        type: "客户",
      };
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    removeById(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          customerApi.deleteById(row.id)
            .then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.list()
            })
        })
    },
    edit(row) {
      this.form = Object.assign({},this.item,row)
      this.form.type = '客户'
      this.dialogFormVisible = true
    },
    handleExportXls(){
      window.location.href = `http://localhost:8080/supplier/exportExcel?supplier=${this.queryParam.supplier}
                  &type=${this.queryParam.type}&telephone=${this.queryParam.telephone}&phonenum=${this.queryParam.phonenum}`
    },
    submitForm(form){
      this.form.allNeedPay = this.form.beginNeedPay
      if (this.form.id === undefined){
          this.$refs[form].validate((valid) => {
            if (valid){
              customerApi.addSupplier(this.form)
                .then(res => {
                  this.$message({
                    type: 'success',
                    message: '添加成功'
                  })
                  this.$refs['form'].clearValidate()
                  this.form = {}
                  this.dialogFormVisible = false
                  this.list()
                })
            }
          }) 
      } else {
        customerApi.updateSupplier(this.form)
          .then(res => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.$refs['form'].clearValidate()
            this.form = {}
            this.dialogFormVisible = false
            this.list()
          })
        }
    },
    cancleSupplier(form){
      this.$refs[form].resetFields()
      this.dialogFormVisible = false
      this.form = {}
    },
    handleCurrentChange(val){
      this.current = val
      this.list()
    },
    handleSizeChange(val){
      this.pageSize = val
      this.list()
    }
  },
};
</script>

<style></style>
